<template>
  <header>
    <!-- 搜索框 -->
    <search :bgcColor="bgcColor" :iconColor="iconColor"></search>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" lazy-render :duration="1500">
      <van-swipe-item v-for="image in images" :key="image.id">
        <img :src="image.image" class="swipe-img" />
      </van-swipe-item>
    </van-swipe>
  </header>
  <main>
    <!-- 分类 -->
    <div class="classify">
      <div class="classify-item" v-for="item in classifications" :key="item.title">
        <div>
          <van-icon :name="item.icon" size="40" :color="item.color" />
        </div>
        <div>
          {{ item.title }}
        </div>
      </div>
    </div>
    <!-- 公告部分 -->
    <van-notice-bar color="#000" background="#fff" left-icon="volume-o" text="医药商城上线了，海量药品显示促销" scrollable></van-notice-bar>
    <!-- 热卖排行&单品包邮 -->
    <van-grid :column-num="2" :border="false" class="sold-post">
      <van-grid-item v-for="item in soldPost" :key="item">
        <img :src="item" />
      </van-grid-item>

    </van-grid>
    <!-- 优惠券 -->
    <div class="coupon">
      <img src="https://img1.baidu.com/it/u=516399965,1115294630&fm=253&fmt=auto&app=120&f=JPEG?w=610&h=305" alt="">
    </div>
    <!-- 限时特价 -->
    <div class="limited-sales">
      <van-cell value="更多" is-link>
        <template #title>
          <span>限时特价</span>
          <van-count-down :time="countDownTime" id="van-count-down">
            <template #default="timeData">
              <span class="block">{{ timeData.hours }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.minutes }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.seconds }}</span>
            </template>
          </van-count-down>
        </template>
      </van-cell>
      <van-grid :column-num="3" :border="false" class="limit-sale">
        <van-grid-item v-for="item in limitSales" :key="item.id">
          <img :src="item.image" @click="gotoGoodsDetails(item.id)"/>
          <div>
            <span class="now-price">￥{{ item.price }}</span>
            <span class="original-price">￥{{ item.originPrice }}</span>
          </div>
        </van-grid-item>

      </van-grid>
    </div>
    <!-- 标签分类 -->
    <van-tabs v-model:active="active" sticky @click-tab="getClassifyGoods(active)">
      <van-tab v-for="item in tabs" :title="item.name" :key="item.id">
        <!-- 商品部分 -->
        <van-card  :price="item.price" :desc="item.desc" :title="item.title"
          :thumb="item.image"
          v-for="item in list" :key="item.id" v-if="list.length>=1" @click="gotoGoodsDetails(item.id)">
          <template #tags>
            <van-tag plain color="red" v-show="item.couponValue">{{ item.couponValue }}</van-tag>
            {{ item.factory }}
          </template>
          <template #footer>
            <van-icon name="star-o" size="25"/>
          </template>
        </van-card>
        <van-empty description="暂时没有商品噢" v-else/>
      </van-tab>
    </van-tabs>
  </main>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { getHomeInfos,getSeckillGoods,getClassify,getGoodsByClassifyId } from '@/api/home';
import router from '@/router';
import search from '@/components/search/index.vue'

//搜索框背景色
const bgcColor = '#09d688'
const iconColor = '#fff'
//轮播图部分
let images: any = ref([])
//分类部分
const classifications: any = [
  {
    title: '中成西药',
    icon: 'coupon-o',
    color: 'blue'
  },
  {
    title: '养生中药',
    icon: 'fire-o',
    color: 'orange'
  },
  {
    title: '保健食品',
    icon: 'gem-o',
    color: 'green'
  },
  {
    title: '医疗器械',
    icon: 'cluster-o',
    color: 'red'
  },
  {
    title: '更多分类',
    icon: 'list-switch',
    color: 'blue'
  }
]

//倒计时部分
const periods = [8, 10, 12, 14, 16, 20, 22, 24] // 全天秒杀时间段
const now = new Date()
const currentHour = now.getHours()
const exist = computed(() => periods.find(period => period > currentHour))
const deadline = new Date(now.getFullYear(),now.getMonth(),now.getDate(),exist.value,0,0,0)
const diff = deadline.getTime() - now.getTime()
const countDownTime = ref(diff)

//热卖排行&单品包邮部分
const soldPost: any = [
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg'
]

//限时特价部分
let limitSales: any = ref([])
//标签分类部分
const active = ref(0)
const tabs: any = ref([])
//商品部分
const list:any = ref([])

  //获取首页信息,轮播图和商品
const getInfo = async() =>{
  const result = await getHomeInfos()
  images.value = result.banners
}
getInfo()

//获取秒杀商品信息
const getSeckill = async() =>{
  const result = await getSeckillGoods()
  for(let i=0;i<3;i++){
    limitSales.value.push(result.list[i])
  }

}
getSeckill()

//获取分类信息
const getClassification = async() =>{
  const result = await getClassify()
  for(let i=0;i<4;i++){
    let data = {
      id:result.list[i].id,
      name:result.list[i].name
    }
    tabs.value.push(data)
  }
}
getClassification()
//根据分类信息获取对应的商品
const getClassifyGoods = async(id:string | number) =>{
  const result = await getGoodsByClassifyId(Number(id)+1)
  list.value=[]
  list.value = result.items.list
}
//每次默认获取首页的商品
getClassifyGoods(0)

//点击进入商品详情页
const gotoGoodsDetails = (id:number | string) =>{
  router.push({
    path:'/details',
    query:{
      id
    }
  })
}

</script>

<style lang="less" scoped>
template {
  display: flex;
  flex-direction: column;
}

header {
  flex-grow: 0;
  height: 250px;
  background-color: #09d688;

  van-swipe {
    height: 160px;
    width: 100%;

  }

  .swipe-img {
    height: 160px !important;
    width: 100% !important;
  }
}

main {
  background-color: #faf8f8;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  border-radius: 20px 20px 0 0;
  margin-top: -37px;

  // 分类部分
  .classify {
    display: flex;
    justify-content: space-evenly;
    text-align: center;
    margin: 10px 0;
  }

  //公告部分

  //热卖排行和单品包邮部分
  .sold-post {
    margin-top: 10px;

    img {
      width: 80%;
      margin-left: 10%;
      height: 40px !important;
    }
  }

  //优惠券部分
  .coupon {
    height: 130px;
    position: relative;
    border: 1px transparent;

    img {
      position: absolute;
      width: 100%;
      height: 130px;
    }
  }

  //限时特价部分
  .limited-sales {
    background-color: #fff;
    border-radius: 10px;
    width: 95%;
    height: 140px;
    margin: auto;
    position: relative;
    margin-bottom: 20px;
    .colon {
      display: inline-block;
      margin: 0 4px;
      color: red;
    }

    .block {
      display: inline-block;
      width: 22px;
      color: #fff;
      font-size: 12px;
      text-align: center;
      background-color: red;
    }

    #van-count-down {
      position: absolute;
      top: 10px;
      left: 80px;
    }

    .limit-sale img {
      width: 100%;
      height: 60px;
      margin-bottom: 10px;
    }

    .now-price {
      font-size: 16px;
      color: red;
    }

    .original-price {
      font-size: 12px;
      color: gray;
      text-decoration: line-through;
    }
  }
}
</style>
